<!--
 * @Author: your name
 * @Date: 2022-01-24 16:26:24
 * @LastEditTime: 2022-07-13 12:23:57
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \app\src\views\el\from\index.vue
-->
<template>
  <div class="from-view">
    <el-form
      v-if="form"
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="130px"
    >
      <el-row :gutter="90" type="flex" justify="center">
        <el-col :span="24">
          <el-form-item
            class="box1 minselect"
            prop="content_label"
            label="内容标签(修改):"
          >
            <el-cascader
              v-model="form.content_label"
              placeholder="请选择"
              :options="config_artist.content_tag.value"
              style="width: 735px"
              :show-all-levels="false"
              size="small"
              :props="{
                multiple: true,
                emitPath: false,
                value: 'value',
                label: 'name',
                children: 'child',
              }"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="90" type="flex" justify="center">
        <el-col :span="24">
          <el-form-item
            class="box1 minselect"
            prop="commercial_label"
            label="商业标签:"
          >
            <el-select
              v-model="form.commercial_label"
              placeholder="请选择"
              filterable
              popper-class="option_artist"
              style="width: 735px"
              :multiple="true"
            >
              <el-option
                v-for="i in config_artist.business_tag.value"
                :key="i.name"
                :value="Number(i.value)"
                :label="i.name"
              >
                {{ i.name }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="box">
        <div class="item" v-for="item in 8" :key="item">{{item}}</div>
    </div>

  <!-- 动态表单校验 -->
  <Rules />
  </div>
</template>

<script>
import Rules from "./rules"
export default {
  components:{Rules},
  data() {
    return {
      form: {
        content_label: [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
        ],
        commercial_label: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      },
      rules: {},
      config_artist: {
        content_tag: {
          name: "content_tag",
          value: [
            {
              name: "音乐",
              value: "1000",
              child: [
                {
                  name: "唱歌",
                  value: "1",
                },
                {
                  name: "白噪音/助眠",
                  value: "2",
                },
                {
                  name: "纯音乐",
                  value: "3",
                },
                {
                  name: "乐器演奏",
                  value: "4",
                },
                {
                  name: "其他音乐",
                  value: "5",
                },
              ],
            },
            {
              name: "舞蹈",
              value: "1001",
              child: [
                {
                  name: "民族舞",
                  value: "6",
                },
                {
                  name: "街舞",
                  value: "7",
                },
                {
                  name: "现代舞",
                  value: "8",
                },
                {
                  name: "专业舞蹈",
                  value: "9",
                },
                {
                  name: "广场舞",
                  value: "10",
                },
                {
                  name: "手势舞",
                  value: "11",
                },
                {
                  name: "宅舞",
                  value: "12",
                },
                {
                  name: "其他舞蹈",
                  value: "13",
                },
              ],
            },
            {
              name: "户外",
              value: "1002",
              child: [
                {
                  name: "探险",
                  value: "14",
                },
                {
                  name: "钓鱼",
                  value: "15",
                },
                {
                  name: "徒步",
                  value: "16",
                },
                {
                  name: "户外工作",
                  value: "17",
                },
                {
                  name: "公园街景",
                  value: "18",
                },
                {
                  name: "赶海",
                  value: "19",
                },
                {
                  name: "旅游风景",
                  value: "20",
                },
                {
                  name: "自驾旅行",
                  value: "21",
                },
                {
                  name: "民宿/酒店分享",
                  value: "22",
                },
                {
                  name: "旅行随拍",
                  value: "23",
                },
                {
                  name: "其他户外",
                  value: "24",
                },
              ],
            },
            {
              name: "文化才艺",
              value: "1003",
              child: [
                {
                  name: "绘画",
                  value: "25",
                },
                {
                  name: "手工艺",
                  value: "26",
                },
                {
                  name: "曲艺",
                  value: "27",
                },
                {
                  name: "书法",
                  value: "28",
                },
                {
                  name: "茶艺",
                  value: "29",
                },
                {
                  name: "棋牌",
                  value: "30",
                },
                {
                  name: "艺术签名",
                  value: "31",
                },
                {
                  name: "其他才艺",
                  value: "32",
                },
              ],
            },
            {
              name: "聊天互动",
              value: "1004",
              child: [
                {
                  name: "日常聊天",
                  value: "33",
                },
                {
                  name: "声控声优",
                  value: "34",
                },
                {
                  name: "其他聊天",
                  value: "35",
                },
              ],
            },
            {
              name: "美食",
              value: "1005",
              child: [
                {
                  name: "饮品制作/教学",
                  value: "36",
                },
                {
                  name: "美食制作/教学",
                  value: "37",
                },
                {
                  name: "美食探店",
                  value: "38",
                },
                {
                  name: "其他美食",
                  value: "39",
                },
              ],
            },
            {
              name: "知识教学",
              value: "1006",
              child: [
                {
                  name: "兴趣教学",
                  value: "40",
                },
                {
                  name: "语言教学",
                  value: "41",
                },
                {
                  name: "综合教育",
                  value: "42",
                },
                {
                  name: "职场技巧",
                  value: "43",
                },
                {
                  name: "自然知识",
                  value: "44",
                },
                {
                  name: "历史知识",
                  value: "45",
                },
                {
                  name: "文学/国学知识",
                  value: "46",
                },
                {
                  name: "科学知识",
                  value: "47",
                },
                {
                  name: "法律知识",
                  value: "48",
                },
                {
                  name: "读书/朗诵",
                  value: "49",
                },
                {
                  name: "其他教学",
                  value: "50",
                },
              ],
            },
            {
              name: "其他",
              value: "1007",
              child: [
                {
                  name: "健身",
                  value: "51",
                },
                {
                  name: "体育运动",
                  value: "52",
                },
                {
                  name: "相亲交友",
                  value: "53",
                },
                {
                  name: "宠物",
                  value: "54",
                },
                {
                  name: "房产",
                  value: "55",
                },
                {
                  name: "游戏",
                  value: "56",
                },
                {
                  name: "购物/电商",
                  value: "57",
                },
                {
                  name: "养生",
                  value: "58",
                },
                {
                  name: "服饰",
                  value: "59",
                },
                {
                  name: "美妆",
                  value: "60",
                },
                {
                  name: "科技",
                  value: "61",
                },
                {
                  name: "励志鸡汤",
                  value: "62",
                },
                {
                  name: "情感咨询",
                  value: "63",
                },
                {
                  name: "二次元",
                  value: "64",
                },
                {
                  name: "虚拟形象",
                  value: "65",
                },
                {
                  name: "汽车展示/测评",
                  value: "66",
                },
                {
                  name: "其他品类",
                  value: "67",
                },
              ],
            },
          ],
        },
        business_tag: {
          name: "business_tag",
          value: [
            {
              name: "快消品",
              value: "1",
            },
            {
              name: "服装配饰",
              value: "2",
            },
            {
              name: "美妆护肤",
              value: "3",
            },
            {
              name: "食品饮料",
              value: "4",
            },
            {
              name: "工具软件",
              value: "5",
            },
            {
              name: "3C电器",
              value: "6",
            },
            {
              name: "汽车",
              value: "7",
            },
            {
              name: "游戏",
              value: "8",
            },
            {
              name: "母婴",
              value: "9",
            },
            {
              name: "旅游",
              value: "10",
            },
          ],
        },
      },
    };
  },
};
</script>

<style lang="less" scoped>
.box{
    width: 80%;
    background-color: blanchedalmond;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item{
        width: 150px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: cadetblue;
    }
}
</style>